<template>
  <div class="process-item-container">
    <div v-for="(roleItem,index) in processItem.examineRoles" :key="index" class="examine-role-item">
      <!-- 标签：审批角色名称 -->
      <div :style="roleItem._isEdit?{paddingTop: '5px',paddingBottom:'5px'}:{width: '120px'}" class="role-tag">
        <i v-if="!roleItem._isEdit && !isPreview" class="el-icon-error" @click="deleteExamineRole(index)" />
        <div v-if="!roleItem._isEdit" class="flex-cell">
          <ToolTip :content="roleItem.roleName"/>
          <i v-if="!isPreview" class="el-icon-edit-outline" style="cursor:pointer;" @click="toEdit(roleItem)" />
        </div>
        <div v-else>
          <el-input :class="{'isError':errorId.includes(`${processIndex}-${index}-roleName`)}" v-model="roleItem.editName" :maxlength="16" size="small" class="input" placeholder="请输入名称" @input="removeError" @keyup.enter.native="toEditOk(roleItem)" >
            <div slot="suffix" class="el-input__icon">
              <i class="el-icon-check" style="cursor:pointer;" @click.stop="toEditOk(roleItem)" />
              <i class="el-icon-close" style="cursor:pointer;" @click.stop="cancelEdit(roleItem, index)" />
            </div>
          </el-input>
        </div>
      </div>
      <div v-if="!isPreview" class="select-container">
        <el-select
          v-model="roleItem.roleType"
          :class="{'isError':errorId.includes(`${processIndex}-${index}-roleType`)}"
          size="small"
          class="select-opeatorType"
          placeholder="请选择审批角色"
          @change="removeError">
          <el-option
            v-for="item in opeatorType"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <!-- 选择自定义人员 -->
        <!-- <selectUser v-if="roleItem.roleType === 2" :class="{'isError':errorId.includes(`${processIndex}-${index}-user`)}" v-model="roleItem.diyUserList" style="margin-left:20px;" @removeError="removeError" /> -->
        <select-custom-user v-if="roleItem.roleType === ROLE_TYPE.CUSTOMIZE" :is-error = "errorId.includes(`${processIndex}-${index}-user`)" v-model="roleItem.diyUserList" :diy-user-item-list.sync="roleItem.diyUserItemList" placeholder="请选择人员" style="margin-left:20px;" />
        <!-- 选择部门 -->
        <selectDepart v-if="roleItem.roleType === ROLE_TYPE.DEPARTMENT" :class="{'isError':errorId.includes(`${processIndex}-${index}-dept`)}" v-model="roleItem.departmentList" style="margin-left:20px;" @removeError="removeError"/>
        <el-checkbox v-if="roleItem.roleType === ROLE_TYPE.DEPARTMENT || roleItem.roleType === ROLE_TYPE.CUSTOMIZE" :disabled="isPreview" v-model="roleItem.isAutoFill" :true-label="1" :false-label="0" style="margin-left: 20px;"><span class="check-span">自动填入</span></el-checkbox>
      </div>
      <div v-if="isPreview" class="preview-container">
        <div v-if="roleItem.roleType === ROLE_TYPE.CREATOR" class="content">任务创建人</div>
        <div v-if="roleItem.roleType === ROLE_TYPE.DEPARTMENT" class="content-container">
          <ToolTip :content="roleItem.departmentNames"/>
          <el-checkbox :disabled="isPreview" v-model="roleItem.isAutoFill" :true-label="1" :false-label="0" style="margin-left: 20px;"><span class="check-span">自动填入</span></el-checkbox>
        </div>
        <div v-if="roleItem.roleType === ROLE_TYPE.CUSTOMIZE" class="content-container">
          <ToolTip :content="roleItem.diyUserNames"/>
          <el-button v-if="roleItem.diyUserList.length > 2" type="text" style="margin-left:5px;"><span style="font-size:14px;" @click="lookUser(roleItem._diyUserListBackups || roleItem.diyUserList)">查看全部</span></el-button>
          <el-checkbox :disabled="isPreview" v-model="roleItem.isAutoFill" :true-label="1" :false-label="0" style="margin-left: 20px;"><span class="check-span">自动填入</span></el-checkbox>
        </div>
        <div v-if="roleItem.roleType === ROLE_TYPE.UNLIMITED" class="content">不限制审批人</div>
        <div v-if="roleItem.roleType === ROLE_TYPE.PROPOSER" class="content">申请人</div>
      </div>
    </div>
    <div class="process-options">
      <div :style="processItem.examineRoles.length >= 2?{opacity: 1}:{opacity:0}" class="process-roleRelation">
        <div class="content">审批角色关系<span v-if="isPreview">：{{ processItem.roleRelation===1?'且':'或' }}</span></div>
        <div v-if="processItem.examineRoles.length >= 2" style="margin-top:8px;">
          <el-radio-group v-if="!isPreview" v-model="processItem.roleRelation">
            <el-radio :label="0" style="margin-right:10px;"><span class="check-span">或</span></el-radio>
            <el-radio :label="1"><span class="check-span">且</span></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div v-if="!isPreview">
        <!-- <el-checkbox :disabled="isPreview" v-model="processItem.isAttachment" :true-label="1" :false-label="0"><span class="check-span">上传附件</span></el-checkbox> -->
        <!-- <el-checkbox :disabled="isPreview" v-model="processItem.isRemark" :true-label="1" :false-label="0"><span class="check-span">审批意见</span></el-checkbox> -->
        <div class="process-check">
          <div class="check-group">
            <el-checkbox :disabled="isPreview || includeCreateNo || includeAutoPay" v-model="processItem.isRequire" :true-label="1" :false-label="0" class="check-item" @change="uniqueChange($event, 'isCountersign', processItem)"><span class="check-span">人员必填</span></el-checkbox>
            <!-- <span>{{ cacheRepealLockId }}--{{ processItem.id }}</span> -->
            <el-checkbox v-if="!cacheRepealLockId || cacheRepealLockId === processItem.id" :disabled="isPreview" v-model="processItem.isRepealLock" :true-label="1" :false-label="0" @change="handleRepealLock(processItem)"><span class="check-span">禁止作废</span></el-checkbox>
          </div>
          <div class="check-group">
            <div class="check-with-tip">
              <el-checkbox :disabled="isPreview" v-model="processItem.isCountersign" :true-label="1" :false-label="0" class="check-item" @change="handelChangeCountersign($event, processItem)"><span class="check-span">设置为加签</span></el-checkbox>
              <el-tooltip class="item check-item" effect="dark" placement="top">
                <div slot="content" style="width: 190px">注意：勾选后节点的人员为必填项，勾选人员必填时不能设置为加签</div>
                <tipIcon is-diy />
              </el-tooltip>
            </div>
            <el-checkbox :disabled="isPreview" v-model="processItem.isRecall" :true-label="1" :false-label="0"><span class="check-span">禁止撤回</span></el-checkbox>
          </div>
        </div>
        <div class="process-check">
          <div class="check-group">
            <el-checkbox :disabled="isPreview" v-model="processItem.isRichText" :true-label="1" :false-label="0" class="mt12"><span class="check-span">审批意见使用富文本</span></el-checkbox>
          </div>
        </div>
        <div class="process-check">
          <div class="check-group">
            <el-checkbox :disabled="isPreview" v-model="processItem.isRestrictAutoApprove" :true-label="1" :false-label="0" class="mt12"><span class="check-span">禁止去重</span></el-checkbox>
          </div>
        </div>
        <div class="process-select">
          <el-select
            v-if="!disableSetEvent"
            v-model="processItem.setEvents"
            multiple
            collapse-tags
            style="width:240px;"
            size="small"
            class="multiple global-select-down"
            popper-class="global-select-down"
            placeholder="请选择开启事件"
            @change="handelChangeEvent(processItem)">
            <el-option
              v-for="item in eventList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <div class="timeout-item">
          <el-checkbox v-model="processItem.isOpenTimeOut" :true-label="1" :false-label="0" class="checkbox" @change="timeoutChange(processItem)"><span class="check-span">审批超时提醒</span></el-checkbox>
          <template v-if="processItem.isOpenTimeOut">
            <!-- <el-input
              v-model="processItem.timeOut"
              class="timeout-item-input"
              oninput="if(value<0)value=0"
              type="number"
              size="small"
              @mousewheel.native.prevent /> -->
            <el-input-number
              v-model="processItem.timeOut"
              :min="1"
              :max="100"
              :precision="0"
              size="small"
              class="timeout-item-input"
              label=""/>
            <span class="timeout-tip">小时后</span>
            <el-select
              v-model="processItem.timeOutType"
              style="width:120px;"
              size="small"
              class="global-select-down"
              popper-class="global-select-down"
              placeholder="请选择提醒类型">
              <el-option
                v-for="item in timeOutTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </template>
        </div>
        <div class="explanation">节点审批说明：<div class="ellipsisOne" style="max-width:200px">{{ processItem.explanation }}</div><i class="el-icon-edit-outline" style="cursor:pointer;" @click="openExplateDialog(processItem)"/></div>
        <explateDialog ref="explateDialog" @setExplanation="setExplanation">
      <!-- <el-checkbox v-if="showAutoFill" :disabled="isPreview" v-model="processItem.isAutoFill" :true-label="1" :false-label="0" @change="handleRepealLock(processItem)"><span class="check-span">自动填入</span></el-checkbox> -->
      </explatedialog></div>
      <div v-else>
        <!-- <el-checkbox v-model="processItem.isAttachment" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isAttachment===1}" disabled><span class="check-span">上传附件</span></el-checkbox> -->
        <!-- <el-checkbox v-model="processItem.isRemark" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isRemark===1}" disabled><span class="check-span">审批意见</span></el-checkbox> -->
        <div class="process-check">
          <div class="check-group">
            <el-checkbox v-model="processItem.isRequire" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isRequire===1}" disabled><span class="check-span">人员必填</span></el-checkbox>
            <el-checkbox v-model="processItem.isRepealLock" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isRepealLock===1}" class="mt12" disabled><span class="check-span">禁止作废</span></el-checkbox>
          </div>
          <div class="check-group">
            <el-checkbox v-model="processItem.isCountersign" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isCountersign===1}" disabled><span class="check-span">设置为加签</span></el-checkbox>
            <el-checkbox v-model="processItem.isRecall" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isRecall===1}" class="mt12" disabled><span class="check-span">禁止撤回</span></el-checkbox>
          </div>
        </div>
        <div class="process-check">
          <div class="check-group">
            <el-checkbox v-model="processItem.isRichText" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isRichText===1}" disabled class="mt12"><span class="check-span">审批意见使用富文本</span></el-checkbox>
          </div>
        </div>
        <div class="process-check">
          <div class="check-group">
            <el-checkbox v-model="processItem.isRestrictAutoApprove" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isRestrictAutoApprove===1}" disabled class="mt12"><span class="check-span">禁止去重</span></el-checkbox>
          </div>
        </div>
        <div v-if="!disableSetEvent" class="flex-text">
          <el-tooltip placement="top">
            <div slot="content" style="max-width:200px;">{{ getEvents(processItem.setEvents) }}</div>
            <span class="content">{{ getEvents(processItem.setEvents) }}</span>
          </el-tooltip>
        </div>
        <div v-if="processItem.isOpenTimeOut" class="flex-text">
          <div class="content">审批超时提醒：</div>
          <div class="content">{{ processItem.timeOut }}小时，</div>
          <div class="content">{{ processItem.timeOutType | timeOutTypeFilter }}</div>
        </div>
        <el-tooltip v-if="processItem.explanation">
          <div slot="content" placement="top" effect="dark" >
            {{ processItem.explanation }}
          </div>
          <div class="explanation">节点审批说明:<span class="ellipsisOne" style="max-width:200px">{{ processItem.explanation }}</span></div>
        </el-tooltip>
      <!-- <el-checkbox v-model="processItem.isAutoFill" :true-label="1" :false-label="0" :class="{'preview-checkbox':processItem.isAutoFill===1}" disabled><span class="check-span">自动填入</span></el-checkbox> -->
      </div>
    </div>
    <div v-if="!isPreview" class="process-item-btn">
      <div class="process-btn" @click="addExamineRoles" >添加角色 <i class="el-icon-plus"/></div>
    </div>
    <detailUser ref="detailUser" @cancel="cancel"/>
  </div>
</template>

<script>
import ElMessage from '@/utils/message';
import selectUser from './selectUser';
import SelectCustomUser from './selectCustomUser';
import selectDepart from './selectDepart';
import explateDialog from './explateDialog';
import detailUser from '@/components/legal/detailUser';
import { EVENT_TYPE, FIXED_PROCESS_TYPE, ROLE_TYPE } from '@/utils/const/process';

export default {
  components: { selectUser, selectDepart, detailUser, SelectCustomUser, explateDialog },
  filters: {
    timeOutTypeFilter(id) {
      const timeOutTypeOptions = [
        { value: 0, label: '仅提醒一次' },
        { value: 1, label: '每小时提醒一次' },
        { value: 2, label: '每4小时提醒一次' },
        { value: 3, label: '每天提醒一次' },
        { value: 4, label: '每周提醒一次' },
        { value: 5, label: '每月提醒一次' }
      ];
      const item = timeOutTypeOptions.find(i => i.value === id);
      return item ? item.label : '--';
    }
  },
  props: {
    processItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    processIndex: {
      type: Number,
      default: 0
    },
    type: {// 增加type判断，避免不同环境id改变
      type: Number,
      default: 0
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    errorId: {
      type: Array,
      default: () => {
        return [];
      }
    },
    cacheRepealLockId: {
      type: Number,
      default: null
    },
    disableSetEvent: {
      type: Boolean,
      default: false
    },
    processList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      ROLE_TYPE,
      opeatorType: [
        { id: 0, name: '任务创建人' },
        { id: 1, name: '选择部门' },
        { id: 2, name: '自定义人员' },
        { id: 3, name: '不限制审批人' },
        { id: 4, name: '申请人' }
      ],
      events: [
        { value: 1, label: '开启合同回收' },
        { value: 2, label: '开启合同编号生成' },
        { value: 3, label: '节点之后生成归档编号' },
        { value: 6, label: '业务回收合同' },
        { value: 7, label: '开启盖章类型填写' }
      ],
      cashoutEvents: [ // 请款流程开启事件
        { value: 4, label: '开启发票填写' },
        { value: 5, label: '自动确认付款' }
      ],
      energyEvents: [
        { value: 7, label: '表单编辑' }
      ],
      // 0:仅提醒一次 1:每小时提醒一次 2:每4小时提醒一次 4:每天提醒一次 4:每周提醒一次 5:每月提醒一次
      timeOutTypeOptions: [
        { value: 0, label: '仅提醒一次' },
        { value: 1, label: '每小时提醒一次' },
        { value: 2, label: '每4小时提醒一次' },
        { value: 3, label: '每天提醒一次' },
        { value: 4, label: '每周提醒一次' },
        { value: 5, label: '每月提醒一次' }
      ]
    };
  },
  computed: {
    showAutoFill() {
      let result = false;
      this.processItem.examineRoles.map(item => {
        if (item.roleType === ROLE_TYPE.DEPARTMENT || item.roleType === ROLE_TYPE.CUSTOMIZE) result = true;
      });
      return result;
    },
    eventList() { // 不同类型的流程获取不同的对应事件列表
      // 新增了精力分配流程,type为12
      if (this.type === FIXED_PROCESS_TYPE.PAYMENT_APPLY) {
        return this.cashoutEvents;
      }
      if (this.type === FIXED_PROCESS_TYPE.EFFORT_ALLOCATION) {
        return this.energyEvents;
      }
      if (this.type === FIXED_PROCESS_TYPE.SIGN_UP) {
        // return [{ value: EVENT_TYPE.POINTS_EDIT, label: '编辑积分' }];
        return [];
      }
      return this.events;
    },
    includeCreateNo() {
      const { setEvents } = this.processItem;
      if (!Array.isArray(setEvents) || !setEvents.length) return false;
      return setEvents.includes(EVENT_TYPE.AFTER_NODE_GENERATE_ARCHIVE_CODE);
    },
    includeAutoPay() { // 是否选中自动确认付款事件
      const { setEvents } = this.processItem;
      if (!Array.isArray(setEvents) || !setEvents.length) return false;
      return setEvents.includes(EVENT_TYPE.OPEN_AUTO_CONFIRM_PAY);
    }
  },
  created() {
    this.formatSetevents(this.processItem);
  },
  /* beforeUpdate() {
    this.formatSetevents(this.processItem);
  }, */
  methods: {
    openExplateDialog(item) {
      this.$refs['explateDialog'].openDialog(item);
    },
    setExplanation(explanation, styConfig) {
      this.$set(this.processItem, 'explanation', explanation);
      this.$emit('setExplanation', {
        explanation,
        styConfig,
        processItemIndex: this.processIndex
      });
    },
    handleRepealLock(item) {
      this.$emit('handleRepealLock', item);
    },
    toEdit(item) {
      this.$set(item, 'editName', item.roleName);
      this.$set(item, '_isEdit', true);
    },
    toEditOk(item) {
      if (!item.editName || item.editName === '') {
        ElMessage.warning('请输入名称');
        return;
      }
      this.$set(item, 'roleName', item.editName);
      this.$set(item, '_isEdit', false);
    },
    cancelEdit(item, index) {
      if (!item.roleName || item.roleName === '') {
        this.deleteExamineRole(index);
        return;
      }
      item._isEdit = false;
      item.editName = '';
      this.removeError();
    },
    deleteExamineRole(index) {
      this.$emit('deleteExamineRoles', {
        processitem: this.processItem,
        examineRoleIndex: index,
        processItemIndex: this.processIndex
      });
      this.removeError();
    },
    addExamineRoles() {
      if (this.processItem.examineRoles.length >= 50) {
        ElMessage.error('最多可添加50个角色');
        return;
      }
      this.$emit('addExamineRoles', { processitem: this.processItem });
      this.removeError();
    },
    removeError() {
      this.$emit('setError', '');
    },
    // 查看全部用户
    lookUser(list) {
      this.$refs.detailUser.openDialog(list);
    },
    cancel({ item, list, extendParams }) {
      const index = list.findIndex(i => i.id === item.id);
      if (index >= 0) {
        list.splice(index, 1);
      }
      this.$emit('deleteUser');
    },
    handelChangeCountersign(value, item) {
      this.uniqueChange(value, 'isRequire', item);
      // 设置为加签后不能选中 节点之后生成归档编号（id:3） 事件
      if (value && item.setEvents.includes(3)) {
        item.setEvents.splice(item.setEvents.indexOf(3), 1);
      }
    },
    uniqueChange(value, filed, item) {
      if (value) {
        this.$set(item, filed, 0);
      } else {
        return;
      }
    },
    handelChangeEvent(item) {
      // 除了请款流程(id:4)，签约内审(id:1023)，其他都需要判断事件 “节点之后生成归档编号（id:3） 业务回收合同（id:6）”
      if (![FIXED_PROCESS_TYPE.PAYMENT_APPLY, FIXED_PROCESS_TYPE.SIGN_UP].includes(this.type)) {
        if (item.setEvents.includes(EVENT_TYPE.AFTER_NODE_GENERATE_ARCHIVE_CODE)) { // 节点之后生成归档编号（id:3）
          this.handleEvent(item, EVENT_TYPE.AFTER_NODE_GENERATE_ARCHIVE_CODE);
        }
        if (item.setEvents.includes(EVENT_TYPE.BUSINESS_RECYCLE_CONTRACT)) { // 业务回收合同（id:6）
          this.handleEvent(item, EVENT_TYPE.BUSINESS_RECYCLE_CONTRACT);
        }
      } else if (this.type === FIXED_PROCESS_TYPE.PAYMENT_APPLY && item.setEvents.includes(EVENT_TYPE.OPEN_AUTO_CONFIRM_PAY)) {
        // 请款流程(id:4)，需要判断事件 “自动确认付款（id:5）”只能开启一个
        const process = this.processList;
        let event5Repeat = false;
        let hasEvent5 = false;
        if (process && process.length) {
          process.forEach(i => {
            if (i.setEvents && i.setEvents.length && i.setEvents.includes(EVENT_TYPE.OPEN_AUTO_CONFIRM_PAY)) {
              if (hasEvent5) {
                event5Repeat = true;
              }
              hasEvent5 = true;
            }
          });
        }
        if (event5Repeat) {
          ElMessage.error('其他节点已开启该事件，无法重复开启');
          item.setEvents.splice(item.setEvents.indexOf(EVENT_TYPE.OPEN_AUTO_CONFIRM_PAY), 1);
          return;
        }
        if (item.setEvents.includes(EVENT_TYPE.OPEN_AUTO_CONFIRM_PAY)) {
          item.isRequire = 1; // 选中"自动确认付款"，默认勾选为必选
        }
      }
    },
    handleEvent(item, id) {
      // “节点之后生成归档编号（id:3）”只能一个节点存在
      const process = this.processList;
      let event3Repeat = false; // “节点之后生成归档编号（id:3）”只能一个节点存在
      let hasEvent3 = false; // 是否已经拥有事件 “节点之后生成归档编号（id:3）”
      if (process && process.length) {
        process.forEach(i => {
          if (i.setEvents && i.setEvents.length && i.setEvents.includes(id)) {
            if (hasEvent3) {
              event3Repeat = true; // 已经有节点存在了 “节点之后生成归档编号（id:3）事件”
            }
            hasEvent3 = true;
          }
        });
      }
      if (event3Repeat) {
        ElMessage.error('其他节点已开启该事件，无法重复开启');
        item.setEvents.splice(item.setEvents.indexOf(id), 1);
        return;
      }
      if (id === EVENT_TYPE.AFTER_NODE_GENERATE_ARCHIVE_CODE) {
        item.isCountersign = 0; // 选中"节点之后生成归档编号"，不能再选加签
        item.isRequire = 1; // 选中"节点之后生成归档编号"，默认勾选为必选
      }
    },
    timeoutChange(item) {
      if (item.isOpenTimeOut) {
        this.$set(item, 'timeOut', 24);
        this.$set(item, 'timeOutType', 0);
      } else {
        this.$set(item, 'timeOut', '');
        this.$set(item, 'timeOutType', '');
      }
    },
    getEvents(events) {
      const labels = [];
      if (!events) return '';
      this.eventList.forEach(item => {
        if (events.indexOf(item.value) >= 0) {
          labels.push(item.label);
        }
      });
      if (labels.length > 0) {
        return labels.join('/');
      } else {
        return '';
      }
    },
    formatSetevents(data) {
      // 事件选项中没有的事件不显示
      if (data.setEvents && data.setEvents.length > 0) {
        const arr = [];
        data.setEvents.forEach(i => {
          this.eventList.forEach(j => {
            if (i === j.value) {
              arr.push(i);
            }
          });
        });
        data.setEvents = arr;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.process-check {
  display: flex;
  & ::v-deep {
    .el-checkbox__label {
      padding-left: 4px;
    }
  }
}
.process-select {
  margin-top: 16px;
}
.check-group {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  & ::v-deep {
    .el-checkbox {
      margin-right: 0px;
    }
  }
  .check-with-tip {
    display: flex;
    align-items: center;
    .icon-font {
      color: #606266;
      margin-left: 5px;
      font-size: 14px;
    }
  }
}
.check-group:last-child {
  margin-right: 0px;
}
.check-item {
  margin-bottom: 12px;
}
.explanation{
  display: flex;
  align-items: center;
  color: #FFA52B;
  font-size: 12px;
  margin-top: 12px;
  &::v-deep {
    .el-icon-edit-outline{
      margin-left: 4px;
      color: #333;
    }
  }
}
.process-item-container {
  min-width: 480px;
  padding: 16px;
  background: #FFFFFF;
  opacity: 1;
  border-radius: 4px;
  .examine-role-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .role-tag {

      min-width: 120px;
      max-width: 220px;
      background: #FAFBFF;
      border: 1px solid #E6EDFF;
      opacity: 1;
      border-radius: 4px;
      padding: 10px;
      position: relative;
      .el-icon-edit-outline {
        flex-shrink: 0;
        font-size: 16px;
        margin-left: 3px;
      }
      .content {
        font-size: 16px;
        color: #333;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .el-icon-error {
        display: none;
        position: absolute;
        font-size: 18px;
        cursor: pointer;
        right: -8px;
        top: -8px;
      }
      &:hover {
        .el-icon-error {
          display: block;
        }
        .el-icon-edit-outline {
          display: block;
        }
      }
      & ::v-deep {
        .el-input {
          .el-input__inner {
            border-color: #DDDDDD;
            height: 28px;
            font-size: 12px;
          }
        }
        .el-input--suffix .el-input__inner {
          padding-right: 48px;
        }
      }
      .input {
        width: 160px;
      }
    }
  }
  .el-icon-check {
    font-size: 15px;
    color: #406EFF;
  }
  .el-input__icon {
    width: 40px;
  }
  .el-icon-close {
    font-size: 15px;
  }
}
.flex-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  .process-btn {
    width: 120px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    border: 1px dashed #406EFF;
    color: #406EFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    i {
      font-size: 16px;
      margin-left: 4px;
    }
  }
}
.process-options {
  display: flex;
  .process-roleRelation {
    margin-right: 55px;
    .content {
      color: #666666;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
.select-opeatorType {
  width: 200px;
}
.select-container {
  display: flex;
  margin-left: 20px;
  align-items: center;
}
.preview-container {
  display: flex;
  margin-left: 44px;
  align-items: center;
  .content-container {
    display: flex;
    align-items: center;
  }
  .content {
    max-width: 120px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    line-height: normal;
    color: #333333;
    opacity: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.preview-checkbox {
  &::v-deep {
    .el-checkbox__inner {
      background-color: #406EFF !important;
      border-color: #406EFF !important;
      &::after {
        border-color: #ffffff !important;
      }
    }
  }
}
.isError {
  &::v-deep {
    .el-input__inner {
      border-color: red !important;
    }
  }
}
.check-span {
  color: #666;
  font-size: 14px;
}
.timeout-item {
  display: flex;
  align-items: center;
  margin-top: 10px;
  .checkbox {
    margin-right: 10px;
  }
  &::v-deep {
    .timeout-item-input {
      margin-right: 5px;
      // width: 50px;
      // .el-input-number__increase,.el-input-number__decrease {
      //   display: none;
      // }
    }
  }
  .timeout-tip {
    font-size: 14px;
    margin-right: 5px;
    color: #666;
  }
}
.flex-text {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}
</style>
